<template>
  <div class="area">
    <AreaList class="area_tree" @change="areaChange"/>
    <BaseOperateTable  
      ref="refPage"
      :show-condition-slot="false"
      :query-url="queryUrl"
      :delete-url="deleteUrl"
      :header="columns"
      @operate="tableOperate">
      <template v-slot:operate>
        <a-button
          type="primary"
          :disabled="checkedAreaId === undefined"
          @click="addService">添加服务</a-button>
      </template>
    </BaseOperateTable>
    <BaseFormDialog
      ref="refServiceDialog"
      :title="dialogTitle"
      :rules="serviceForm.rules"
      :form="serviceForm.data" />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import AreaList from './AreaList.vue'
import BaseOperateTable from '../../../components/BaseOperateTable.vue';
import BaseFormDialog from '../../../components/BaseFormDialog.vue';
import {createService, editService, getAreaByAll} from '@/api/area/handleData.js';
import {ServiceTypes, GeometryTypes} from '@/config/area.js';
import {BasePath} from '@/api/request.js';
const refPage = ref(null);
const queryUrl = ref(`${BasePath}/demonstrationServer/page`);
const deleteUrl = ref(`${BasePath}/demonstrationServer/`);
const columns = ref([
  {
    title: '服务名称',
    dataIndex: 'serverName',
    ellipsis: true
  },
  {
    title: '服务类型',
    dataIndex: 'type',
    ellipsis: true
  },
  {
    title: '要素类型',
    dataIndex: 'geometryType',
    ellipsis: true
  },
  {
    title: '服务地址',
    dataIndex: 'serverUrl',
    ellipsis: true
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    ellipsis: true
  },
])

const checkedAreaId = ref(undefined);

const areaChange = (id) =>{
  checkedAreaId.value = id;
  refPage.value.queryByCondition({demonstrationId:id});
};

const dialogTitle = ref('添加服务');
const refServiceDialog = ref(null);

const addService = () =>{
  dialogTitle.value = '添加服务';
  let data = {}
  serviceForm.value.data.forEach(({ key, value }) => {
    data[key] = value
  })
  data.demonstrationId = checkedAreaId.value;
  refServiceDialog.value.setRequest(createService, () => {
    refPage.value.resetQuery()
  })
  refServiceDialog.value.setFormData(data)
  refServiceDialog.value.show()
}

/** 表格操作列事件 */
const tableOperate = ({ eventType, data }) => {
  if (eventType === 'edit') {
    dialogTitle.value = '编辑服务'
    refServiceDialog.value.setRequest(editService, () => {
      refPage.value.query()
    })
    refServiceDialog.value.setFormData(data)
    refServiceDialog.value.show()
  }
}
const  areaList = ref([]);
const serviceForm = ref({
  data:[
    { key: 'demonstrationId', value: undefined, label: '所属示范区', options: areaList, type: 'select'},
    { key: 'serverName', value: undefined, label: '服务名称' },
    { key: 'type', value: undefined, label: '服务类型', options: ServiceTypes, type: 'select' },
    { key: 'geometryType', value: undefined, label: '要素类型', options: GeometryTypes, type: 'select' },
    { key: 'serverUrl', value: undefined,label: '服务地址' }
  ],
  rules:{
    demonstrationId:[
      { required: true, message: '请选择所属示范区', trigger: 'blur', type: 'number' }
    ],
    serverName:[
      { required: true, message: '请输入服务名称', trigger: 'blur' }
    ],
    type:[
      { required: true, message: '请选择服务类型', trigger: 'blur' }
    ],
    geometryType:[
      { required: true, message: '请选择要素类型', trigger: 'blur' }
    ],
    serverUrl:[
      { required: true, message: '请输入服务地址', trigger: 'blur' }
    ]
  }
})

/** 请求示范区列表 */
const getAreaList = () =>{
  getAreaByAll().then(({data, resCode}) =>{
    if(resCode === '00000'){
      areaList.value = data.map(({id, demonstrationName}) =>{
        return {
          label: demonstrationName,
          value: id
        }
      });
    }
  })
}

getAreaList();
</script>
<script>
export default {
  name: 'area'
}
</script>
<style scoped>
.area {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  background: white;
}
.area_tree {
  width: 218px;
  height: 100%;
  border: 1px solid #f4f5f9;
  padding: 0 12px;
}
.area_table {
  height: 100%;
  width: calc(100% - 268px);
}
</style>
